<template>
  <div class="order-container">
    <div class="order-item" v-for="(item, index) in props.orderList" :key="item.key">
      <span>{{ item.label }}</span>
      <div class="order-icons" @click="onChangeOrder(item)">
        <caret-up-outlined class="order-icon" :style="orderKey === item.key && !isDescending ? 'color:#FF6923' : ''" />
        <caret-down-outlined class="order-icon" :style="orderKey === item.key && isDescending ? 'color:#FF6923' : ''" />
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import {
  CaretUpOutlined,
  CaretDownOutlined,
} from '@ant-design/icons-vue';
import { computed, reactive, toRefs } from '@vue/reactivity';
import { ref, onMounted, watch } from 'vue'
let orderKey = ref<string>('')
let isDescending = ref<boolean>(true)
const emits = defineEmits<{
  (emitstr: 'changeOrders', emitData: {
    isDescending: boolean
    propertyName?: string
  }): void
}>()

const props = withDefaults(
  defineProps<{
    orderList: any;
  }>(),
  {
    orderList: []
  }
);
function onEmits() {
  emits('changeOrders', {
    isDescending: isDescending.value,
    propertyName: orderKey.value
  })
}
// 修改排序
function onChangeOrder(item: { key: string, label: string }) {
  if (item.key === orderKey.value && isDescending.value) {
    isDescending.value = false
    orderKey.value = ''
    console.log(1);
    onEmits()
    return
  }
  if (item.key === orderKey.value && !isDescending.value) {
    isDescending.value = true
    console.log(2);
    onEmits()
    return
  }
  if (item.key !== orderKey.value) {
    isDescending.value = false
    orderKey.value = item.key
    onEmits()
    console.log(3);
    return
  }
  // const emitData = { page_no, page_size: state.pageSize }
}
</script>

<style scoped lang="less">
.order-container {
  display: flex;
  flex-direction: row;
  align-items: center;

  .order-item {
    font-size: 14px;
    display: flex;
    flex-direction: row;
    align-items: center;
    font-size: 14px;
    font-weight: normal;
    line-height: 14px;
    letter-spacing: 0em;
    color: #333333;
    margin-right: 10px;
  }

  .order-icons {
    display: flex;
    flex-direction: column;
    margin-left: 10px;
    cursor: pointer;

    .order-icon {
      font-size: 10px;
      color: #CCCCCC;
    }
  }
}
</style>